<template>
  <div class="map-box">
    <div id="map"></div>
    <form>
      <label for="zoomOnClick">点击聚合是否展开</label>
      <input type="checkbox" name="zoomOnClick" id="zoomOnClick" checked>
    </form>
  </div>
</template>
<script setup>
  import { onMounted } from 'vue'
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  const scripts = [
    'http://1.95.157.217/wmap/wmap.umd.js',
    'http://1.95.157.217/static/turf/turf.min.js'
  ]
  async function loadScripts (scripts) {
    for (const url of scripts) {
      try {
        await loadScript(url);
      } catch (err) {
        console.error(`${url} failed:`, err);
      }
    }
  }
  onMounted(() => {
    loadScripts(scripts).then(() => {
        const locationIMG =
    ''

        const points1 = turf.randomPoint(1000, { bbox: [96, 31, 100, 40] })
        const points2 = turf.randomPoint(10000, { bbox: [103, 36, 103.05, 36.06] })

        const map = new WMap.Map('map', {
          center: [105.04434162820588, 35.0690079506098],
          zoom: 5,
          minZoom: 3,
          maxZoom: 18
        })
        const markers = points1.features.map((feature, i) => {
          const marker = new WMap.Marker({
            position: feature.geometry.coordinates,
            icon: locationIMG,
            offset: [-16, -16],
            label: `${i}`,
            extData: {
              name: `${i}`
            }
          })
          marker.on('click', e => {
            console.log(e.target.olTarget)
            console.log(e.target.getExtentData())
          })
          return marker
        })

        const contentMarkers = points2.features.map((feature, i) => {
          const marker = new WMap.Marker({
            fontColor: '#fff',
            borderColor: '#0000005e', // 边框颜色
            labelBgColor: '#0000005e', // 背景颜色
            offset: [-35, -80],
            labelYOffset: -90,
            labelXOffset: 0,
            padding: [5, 3, 5, 5],
            position: feature.geometry.coordinates,
            label: `${i}`
          })
          marker.on('click', e => {
            map.setTop(e.target)
          })
          return marker
        })

        // 实例化聚合对象
        const markerCluster = new WMap.MarkerCluster(map, markers.concat(contentMarkers), {
          noClusterZoom: 18, // 在zoom及以上不聚合
          distance: 40, // 要素将聚集在一起的距离（以像素为单位）
          minDistance: 30, //  簇之间的最小距离（以像素为单位）
          showViewExtent: true, // 只展示可视区域 Marker
          zoomOnClick: true, // 是否点击展开 Cluster
          averageCenter: false // 聚合点的图标位置是否是所有聚合内点的中心点。默认为否
        })

        const zoomOnClickDom = document.getElementById('zoomOnClick')
        zoomOnClickDom.onchange = function (e) {
          markerCluster.setZoomOnClick(e.target.checked)
        }

        markerCluster &&
          markerCluster.on('click', w => {
            console.log(w)
          })

        map.on('click', w => {
          console.log(w.lngLat)
        })
    })
  })
</script>

<style>
.map-box{
  height: calc(100vh - 20px)
}
#map {
  height: calc(100% - 100px);
}
</style>
